<template>
  <div class="app-container">
    <div class="filter-container">
      <selectServer @server-selected="handleSelectServer" />
      <!-- <el-date-picker v-model="searchForm.date" class="filter-item" type="date" style="width: 140px;" placeholder="离线日期"></el-date-picker> -->
      <!-- <el-select v-model="searchForm.days" class="filter-item" style="width: 110px;" clearable :loading="loading" placeholder="流失天数">
        <el-option v-for="(item, k) in days" :key="k" :label="item" :value="k"></el-option>
      </el-select> -->
      <!-- <el-select v-model="searchForm.type" class="filter-item" style="width: 110px;" clearable :loading="loading" placeholder="统计类型" @change="handleChange">
        <el-option v-for="(item, k) in types" :key="k" :label="item" :value="k"></el-option>
      </el-select> -->
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <!-- 遍历 tables 数组，动态生成 el-table -->
    <div v-for="(table, index) in list" :key="index" style="display:block;width: 420px;float: left;margin: 5px 0;">
      <!-- <h3>{{ table.sid }}</h3> -->
      <el-table
        :data="table.items"
        width="410px"
        border
      >
        <el-table-column align="center" :label="table.server_info">
          <el-table-column label="在线人数" prop="online" width="150" align="center"></el-table-column>
          <el-table-column label="人数" prop="num" width="80" align="center"></el-table-column>
          <el-table-column label="百分比" prop="radio" width="80" align="center"></el-table-column>
          <el-table-column label="累计流失百分比" prop="loss_radio" width="100" align="center"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getofflineList } from '@/api/statis'
import checkPermission from '@/utils/permission'
import SelectServer from '@/components/SelectServer'
import { Message } from 'element-ui'
const days = {
}
const types = {
}
export default {
  name: 'LossOffline',
  components: { SelectServer },
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      list: [],
      serverList: [],
      days: days,
      types: types,
      field_name: '最后离线-注册',
      loading: false,
      listLoading: false,
      downloadLoading: false,
      searchForm: {
        // days: '3',
        // type: 'level',
        // date: '',
        servers: []
      }
    }
  },
  created() {
  },
  methods: {
    checkPermission,
    handleFilter() {
      this.getList()
    },
    handleSelectServer(servers) {
      this.searchForm.servers = servers
    },
    handleChange(val) {
      this.type = this.types[val]
    },
    async getList() {
      this.listLoading = true
      console.log(this.searchForm)
      if (this.searchForm.servers.length === 0) {
        this.$message.error('请选择服务器')
        return
      }
      const res = await getofflineList(this.searchForm)
      this.listLoading = false
      this.list = res.data
      // this.updateServerInfo(0, 1000, '时间')
    },
    updateServerInfo(index, newSid, newOpenTime) {
      const item = this.list[index]
      console.log(item)
      if (item === undefined) return

      item.serverInfo = `${newSid} - ${newOpenTime}`
      item.sid = newSid
      item.open_time = newOpenTime
    }
  }
}
</script>
